<template>
  <el-dialog
    title="余额变动明细"
    v-model="visible"
    :close-on-click-modal="false"
    draggable
    width="1300px"
    @close="onClose"
  >
    <el-form v-show="showSearch" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="订单编号：" prop="orderSn">
        <el-input
          v-model.trim="queryParams.orderSn"
          placeholder="请输入订单编号"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch(true)"
        />
      </el-form-item>
      <el-form-item label="变动时间：">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        />
      </el-form-item>
      <el-form-item label="类型：" prop="type">
        <ApiSelect v-model:modelValue="queryParams.type" :options="statusOptions" />
      </el-form-item>

      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="用户" align="center" prop="nickName" />
      <el-table-column label="订单编号" align="center" prop="orderSn" />
      <el-table-column label="变动时间" align="center" prop="createTime" width="180">
        <template #default="{ row }">
          {{ parseTime(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="储值余额变动（元）" align="center" prop="variationMoney" />
      <el-table-column
        label="赠送消费金变动（元）"
        align="center"
        prop="variationGiftGold"
        width="180"
      />
      <el-table-column label="类型" align="center" prop="type">
        <template #default="{ row }">
          {{ statusOptions.find((i) => i.value === row.type).label }}
        </template>
      </el-table-column>
      <el-table-column label="当前储值余额（元）" align="center" prop="currentMoney" />
      <el-table-column
        label="当前赠送消费金额（元）"
        align="center"
        prop="currentGiftGold"
        width="180"
      />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>
<script setup>
import { getAmountChangeListApi } from '@/api/storedEquity'
import { parseTime } from '@/utils/tools'

const loading = ref(false)
const visible = ref(false)

const showSearch = ref(true)

const queryRef = ref()
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  orderSn: null,
  clientId: null,
  startTime: null,
  endTime: null,
  type: null
})
const dateRange = ref([])
const list = ref([])
const total = ref(0)

const statusOptions = [
  { value: 1, label: '充值' },
  { value: 2, label: '消费' },
  { value: 3, label: '退款' },
  { value: 4, label: '套餐退款' }
]
/** 查询列表 */
function handleSearch(type) {
  if (type) {
    queryParams.value.pageNum = 1
    getList()
  } else {
    dateRange.value = []
    queryRef.value.resetFields()
    handleSearch(true)
  }
}
/**获取列表数据 */
function getList() {
  loading.value = true
  queryParams.value.startTime = dateRange.value ? dateRange.value[0] : null
  queryParams.value.endTime = dateRange.value ? dateRange.value[1] : null
  getAmountChangeListApi(queryParams.value)
    .then((res) => {
      loading.value = false
      list.value = res.rows || []
      total.value = res.total || 0
    })
    .catch(() => {
      loading.value = false
    })
}
/** 初始化 */
function init(row) {
  visible.value = true
  queryParams.value.clientId = row.clientId
  getList()
}
function onClose() {
  dateRange.value = []
  queryRef.value.resetFields()
}
defineExpose({ init })
</script>
<style lang="scss" scoped></style>
